<template>
	<view class="navBar-conatiner">
		<view class="navBar-top">
			<view :style="{height:statusHeight + 'rpx'}"></view>
			<view @click="handleSearch" class="navBar-top-search" :style="{marginRight: searchRight + 'rpx'}">
				<uni-icons type="search" color="#999"></uni-icons>
				<view class="nav-bar-search-txt">
					请输入文章标题进行搜索
				</view>
			</view>
		</view>
		<!-- 底部垫片，防止上部分的搜索栏挡住下面内容 -->
		<view :style="{height:80 + statusHeight + 'rpx'}"></view>
	</view>
</template>

<script>
	export default {
		name:"NavBar",//方便devtools进行查找
		data() {
			return {
				statusHeight:20,
				searchRight:0
			};
		},
		methods:{
			handleSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
		},
		async created() {
			// 由于在小程序和app中手机上部分会有状态栏,而我们的页面是相对于屏幕的尺寸画的.
			// 所以需要获取到不同设备的,状态栏高度
			// 通过uni.getSystemInfo()获取设备信息
			const sysInfo = await uni.getSystemInfo()
			// 在H5中没有状态栏高度
			// // #ifndef H5
			// 	this.statusHeight = sysInfo.statusBarHeight;
			// // #endif
			// #ifdef MP-WEIXIN
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.statusHeight = menuButtonInfo.top * 2;
			this.searchRight = menuButtonInfo.width * 2;
			console.log("微信11",menuButtonInfo,this.statusHeight,this.searchRight);
			// #endif
			console.log("高度",this.statusHeight);
		}
	}
</script>

<style lang="scss" scoped>
@import "./scss/NavBar.scss";
</style> 